<template>
  <div class="footer-box">
    <ul>
        <li @click="home">
            <span class="iconfont icon-shouye"></span>
            <p>首页</p>
        </li>
        <li>
            <router-link to="../../Classify/">
            <span class="iconfont icon-fenlei"></span>
            <p>分类</p>
              </router-link>
        </li>
        <li @click="study">
            <span class="iconfont icon-book"></span>
            <p>我的学习</p>
        </li>
        <li @click="MY">
            <span class="iconfont icon-wode"></span>
            <p>我的</p>
        </li>
    </ul>
  </div>
</template>


<script>
export default {
  name: "Footer",
  data() {
    return {
      msg: "hi",
    };
  },
  methods:{
    home(){
      this.$router.push('/')
    },
    study(){
      let user = localStorage.getItem('username');
      if(user){
        this.$router.push('/Study')
      }else{
        this.$router.push('/Mystudy')
      }
    },
    MY(){
      this.$router.push('/my')
    }
  }
};
</script>

<style scoped>
@import url(../../assets/zhy/iconfont/iconfont.css);
.footer-box{
    width: 100%;
    height: .5rem;
    /* position: relative; */
    background-color: #fff;
}

.footer-box ul{
    display: flex;
    list-style: none;
}

.footer-box ul li{
    width:25%;
    text-align: center;
}
.footer-box ul li span{
    display: block;
    font-size: .22rem;
}
.footer-box ul li p{
    display: block;
    font-size: .12rem;
}
a{
  text-decoration:none;
  color: black;
}
ul li:hover{
  color: orangered;
}
</style>
